<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/mobile/import/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>商品列表</title>
	<%@ include file="/WEB-INF/views/mobile/import/meta.jsp"%>
	<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${ctxStatic}/modules/accordion-menu/css/style.css" media="screen" type="text/css" />
<script type="text/javascript">
	var clientCookie = new MallCookieService();
	var sid="${merchant.id}";
	var classifyId = "${classifyId}";
	var choiceClassifyId = "${choiceClassifyId}";
	var products = new Array();
	
	$(document).ready(function() {
		var cid= "";
		if(clientCookie.getClassifyId()==classifyId && clientCookie.getChoiceClassifyId()!=null && clientCookie.getChoiceClassifyId()!="" && clientCookie.getChoiceClassifyId()==choiceClassifyId){
			cid = clientCookie.getChoiceClassifyId();
		}else{
			cid=choiceClassifyId;
		}
		//初始化cookie内容
		clientCookie.setSID(sid);
		clientCookie.setClassifyId(classifyId);
		clientCookie.setChoiceClassifyId(choiceClassifyId);
		
		mall_showClassifyProducts(cid);
		
		/*初始化内容所有商品*/
		if(${fn:length(list)}>0){  //加载进来时封装商品信息
			products = new Array();
			<c:forEach items="${list}" var="product" varStatus="ps">
				var item = new Product();
				item.setId("${product.id}");
				item.setPrice("${product.price}");
				item.setStartSaleNum("${product.startSaleNum}"); //起购量
				item.setPurchaseNum("${product.purchaseNum}");   //限购量
				item.setNumber("${product.number}");   //购物车里对应该商品购买数量
				item.setAmount("${product.amount}");   //购物车里对应该商品购买金额
				item.setName("${product.name}");
       			item.setAssisTitle("${product.assisTitle}");
       			item.setLogoUrl("${product.logoUrl}");
       			item.setOriginalPrice("${product.originalPrice}");
				products.push(item);
				
			</c:forEach>
		}
	});
	
	/**查询分类*/
	function mall_showClassifyProducts(cid){
		document.body.scrollTop=0;
		clientCookie.setChoiceClassifyId(cid);//写入cookie，保存当前二级菜单
		/**切换选中样式*/
		$("#" + choiceClassifyId).removeClass("pc_checked");
		$("#span" + choiceClassifyId).removeClass("pc_span_checked").css("color", "#637970");
		
		$("#" + cid).addClass("pc_checked");
		$("#span" + cid).addClass("pc_span_checked").css("color", "#E0630D");
		choiceClassifyId = cid;
		//缓存一级分类Id
		var pCid = $("#" + cid).parent().parent().attr("id");
		clientCookie.setClassifyId(pCid);
		
		var param = "sid="+clientCookie.getSID(sid)+"&classifyId="+choiceClassifyId+"&shopModel=classify";
		$("#loading").attr("class","loading");
		$.ajax({
			type: 'get',
			url: '${ctxShop}/shoping/goodList/productList.shtml',
			data: param,
			dataType: 'json',
			success: function(data){
				products = new Array();
				var tr = "";
				if(data == null || data.length == 0 ){
					tr = "<div class=\"row\" align=\"center\"><div class=\"col-md-11 col-sm-11 col-xs-11\"><div class=\"pc_nodata\">暂无商品</div></div></div>";// style=\"margin-left: 50px;\"
				}else{
					
					$.each(data,function(i,product){
							var url = "${ctxShop}/shoping/goodInfo/productDetail.shtml?id="+product.id+"&mode=${mode}";
							tr += "<div class=\"row\" style=\"padding-top: 10px; padding-bottom: 10px; border-bottom: 2px solid #D5E9BE;\">";
							tr += "<div id=\""+product.id+"\" class=\"media\">";
							tr += "<div class=\"media-left\" onclick=\"showProductDetail('"+url+"');\">";
							tr += "<a href=\"javascript:\">";
	                        tr += "<img id=\"photo"+i +"\" class=\"displayImages media-object body_product_img pc_img\"";
							tr += "src=\"${ctxFront}/images/loading.png\" path=\"${ctxWeb}/shops/download?filePath="+product.logoUrl +"\"";
							tr += "data-holder-rendered=\"true\" />";
	                        tr += " </a>" ;
							tr += "</div>" ;
							tr += "<div class=\"media-body\">" ;
							tr += "<a href=\"javascript: showProductDetail('"+url+"');\"> <strong>"+product.name+"</strong></a>" ;
	                       	tr += " </br>" ;
	                        tr += "<label>" ;
	                        tr += "  "+product.assisTitle +"" ;
	                        tr += " </label>" ;
	                        tr += " </br>" ;
							tr += "<label>" ;// style=\"margin-top: -5px;\"
							tr += "<label class=\"pc_amount\"><strong>￥"+product.price+"</strong></label><label style=\"color: #bbb; font-size: 14px;\">&nbsp;&nbsp;&nbsp;&nbsp;<del>￥"+product.originalPrice+"</del></label>";
							tr += "</label>" ;
							tr += "<div class=\"input-group input-group-sm pc_text\">" ; //style=\"margin-top: -5px;\"
					        tr += "<img onclick=\"mall_diffProductCart('"+product.id+"', 0)\" id=\"imgdiff"+product.id+"\" class=\"pc_left pc_cursor\" status=\"0\" alt=\"\" src=\"${ctxStatic}/modules/bootstrap/img/diff-1.png\" width=\"25\" height=\"25\"/>";
					       	tr += "<label class=\"pc_lable pc_left\"><strong id=\"sl_product"+product.id+"\">0</strong></label>" ;
					        tr += "<img onclick=\"mall_addProductCart('"+product.id+"')\" id=\"imgadd"+product.id+"\" class=\"pc_left pc_cursor\" status=\"1\" alt=\"\" src=\"${ctxStatic}/modules/bootstrap/img/add-2.png\" width=\"25\" height=\"25\"/>" ;
							tr += "</div>" ;
							tr += "</div>";
							tr += "</div>";
							tr += "</div>" ;
							
						/**初始化列表*/
						var item = new Product();
						item.setId(product.id);
						item.setPrice(product.price);
						item.setStartSaleNum(product.startSaleNum); //起购量
						item.setPurchaseNum(product.purchaseNum);   //限购量
						item.setNumber(product.number);   //购物车里对应该商品购买数量
						item.setAmount(product.amount);   //购物车里对应该商品购买金额
						item.setName(product.name);
       					item.setAssisTitle(product.assisTitle);
       					item.setLogoUrl(product.logoUrl);
       					item.setOriginalPrice(product.originalPrice);
						products.push(item);
					});
				}
				
				$("#product_list_data").empty();
				$("#product_list_data").append(tr);
				
				/**初始化购物车列表*/
				initProductCar();
				//预加载图片
				startLoadImage();
			},
			failure: function(data){
				alert(data + '处理失败！');
			}
		});
		
		document.body.scrollTop=0;
		
		setTimeout(function(){
				$("#loading").attr("class","");
			},1000);
		
		
	}
	
	function showProductDetail(url){
		//loading('正在跳转，请稍等...');
		setTimeout(function(){
			//hideLoader();
			document.location=url+"&sid="+sid+"&classifyId="+choiceClassifyId+"&shopModel=classify";				
		},1000);
	}
	
	/**初始化购物车列表*/
	initProductCar();
</script>
</head>
<body>
	<!--导航条-->
<%@ include file="/WEB-INF/views/mobile/import/top.jsp"%>

	<!-- 内容 -->
	<div class="container" style="margin-top: 40px; background-color: #FBFEEB;">
		<div class="col-md-12 col-sm-12 col-xs-12">
			<%@ include file="/WEB-INF/views/mobile/import/navicat.jsp"%>
			
               <div class="row">
                   <div class="col-md-5 col-sm-5 col-xs-5 text-center pc_left_menu pc_left">
                   		<ul id="accordion" class="accordion">
                    		<c:if test="${fn:length(stores) > 0}">
							<c:forEach items="${stores}" var="store" varStatus="vs">
							<li id="${store.classify.id }" class="parent_menu">
								<div class="link">
									<i class="fa">
										<c:if test="${(vs.index+1)==1}">
										<img src="${ctxStatic }/modules/bootstrap/img/caichang.png" width="20" height="20" style="margin-top: -5px;" />
										</c:if>
										<c:if test="${(vs.index+1)==2}">
										<img src="${ctxStatic }/modules/bootstrap/img/chaoshi.png" width="20" height="20" style="margin-top: -5px;" />
										</c:if>
										<c:if test="${(vs.index+1)==3}">
										<img src="${ctxStatic }/modules/bootstrap/img/huadian.png" width="20" height="20" style="margin-top: -5px;" />
										</c:if>
									</i>
									${store.classify.name }
									<i class="fa fa-chevron-down"></i>
								</div>
								<ul class="submenu">
									<c:forEach items="${store.classify.childList}" var="classify">
									<li id="${classify.id}" class="${choiceClassifyId== classify.id?'pc_checked':''}">
										<a id="span${classify.id}" href="javascript:;" class="${choiceClassifyId== classify.id?'pc_span_checked':''}" onclick="mall_showClassifyProducts('${classify.id}');" style="padding: 10px 0px 10px 0px;">${classify.name }</a>
									</li>
									</c:forEach>
								</ul>
							</li>
							</c:forEach>
							</c:if>
							<c:if test="${fn:length(stores) == 0}">
								<li>
									<a href="#">暂无商店</a>
								</li>
							</c:if>
						</ul>
						
					<!-- <ul class="nav nav-pills nav-stacked nav-pills-stacked-example pc_left_menu">
						<c:if test="${fn:length(classifies) > 0}">
							<c:forEach items="${classifies}" var="classify">
								<li id="${classify.id}" class="${choiceClassifyId== classify.id?'pc_checked':''}">
									<span id="span${classify.id}" class="${choiceClassifyId== classify.id?'pc_span_checked':''}" onclick="mall_showClassifyProducts('${classify.id}');" style="position: relative; display: block; padding: 10px 15px; cursor: pointer;"><strong>${classify.name }</strong></span>
								</li>
							</c:forEach>
						</c:if>
						<c:if test="${fn:length(classifies) == 0}">
							<li>
								<a href="#">暂无分类</a>
							</li>
						</c:if>
					</ul> -->
				</div>
				
				<div id="product_list_data" class="col-md-7 col-sm-7 col-xs-7" style="padding-left: 0px; padding-bottom: 52px; width: 68%; float: right;">
                </div>
               </div>
		</div>
	</div>
	
	<!-- 底部 -->
	<nav class="container navbar navbar-default navbar-fixed-bottom pc_bottom_width">
	<div class="container-fluid text-center">
              <div class="row">
                  <div class="col-md-5 col-sm-5 col-xs-5 pc_color">
                     	总金额：<span class="pc_amount">￥<small id="sl">0.00</small></span>
                  </div>
                  <div class="col-md-4 col-sm-4 col-xs-4 pc_color" id="totalAmountDesc" style="display: none;">
                      
                  </div>
                  <div class="col-md-3 col-sm-3 col-xs-3 pc_right">
                  		<a href="${ctxShop}/shoping/shopCart?sid=${merchant.id}&classifyId=${classifyId}">
		            	<div class="pc_b">
		            		<img alt="去结算" src="${ctxStatic}/modules/bootstrap/img/gwc_0.png" width="50" height="45">
		            	</div>
		                <div class="pc_badger_css">
		                	<div  class="pc_badger_badge" style="border-radius:50%;background-color: red;" id="car_num">0</div>
		                </div>
		            </a>
                  </div>
              </div>
          </div>
	</nav>
	<script type="text/javascript">
		function initMenuLayout(){
			//计算pc_left_menu部分的高度
			var topH = $(".navbar-fixed-top").height();
			var bottomH = $(".navbar-fixed-bottom").height();
			//var pcNavbarH= $(".pc_navbar-fixed-position").height();
			var pcNavbarH= 0;
			var winH = $(window).height();
			var classifyMenuH = winH-topH-bottomH-pcNavbarH-47;
			$(".pc_left_menu").height(classifyMenuH);
			
			//加载选中一级分类，展开二级分类
			var cookieService = new  MallCookieService();
			var classifyId=cookieService.getClassifyId();
			if(classifyId==null || classifyId==""){
				cookieService.setClassifyId($(".parent_menu:eq(0)").attr("id"));
			}
			$(".parent_menu").each(function(){
				if($(this).attr("id")==classifyId){
					$(this).addClass("open");
					$(this).find(".submenu").css("display", "block");
				}
			});
		}
		initMenuLayout();
	</script>
</body>
</html>

